<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图书搜索</title>
<style>
body{
font-family:微软雅黑}
.search input{
width:350px;
height:30px;}
.item{
width:350px;
height:100px;
line-height:100px;
border-bottom:1px solid #999999;}
.item img{
width:100px;
float:left}
.item span{
height:100px;
line-height:100px;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="search">
		<input type="text" v-model="searchStr" placeholder="请输入搜索内容">
	</div>
	<div>
		<div class="item" v-for="book in results">
			<img :src="book.image">
			<span>{{book.bookname}}</span>
		</div>
	</div>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		searchStr : '',//搜索关键字
		books : [{//图书信息数组
			bookname : '零基础学JavaScript',
			image : 'images/javascript.png'
		},{
			bookname : '零基础学HTML5+CSS3',
			image : 'images/htmlcss.png'
		},{
			bookname : '零基础学C语言',
			image : 'images/c.png'
		},{
			bookname : 'JavaScript精彩编程200例',
			image : 'images/javascript200.png'
		},{
			bookname : 'HTML5+CSS3精彩编程200例',
			image : 'images/htmlcss200.png'
		},{
			bookname : 'Java精彩编程200例',
			image : 'images/java200.png'
		}]
	},
	computed : {
		results : function(){
			var books = this.books;
			if(this.searchStr == ''){
				return books;
			}
			var searchStr = this.searchStr.trim().toLowerCase();//去除空格转换为小写
			books = books.filter(function(ele){
				//判断图书名称是否包含搜索关键字
				if(ele.bookname.toLowerCase().indexOf(searchStr) != -1){
					return ele;
				}
			});
			return books;
		}
	}
})
</script>


</body>

</html>



